// 工具函数(函数库)

// 获取单个元素
function $1(selector) {
    return document.querySelector(selector)
}

// 获取元素集合
function $2(selector) {
    return document.querySelectorAll(selector)
}

// 获取元素
function $(selector) {
    var dom = document.querySelectorAll(selector)
    if (dom) {
        // 获取到元素
        if (dom.length > 1) {
            // 获取到一个以上的集合时直接返回集合
            return dom
        } else {
            // 获取到只有一个元素时只返回集合中的第一个元素
            return dom[0]
        }
    } else {
        // 获取不到元素返回null
        return null
    }
}

// 封装一个函数，获取元素到页面左侧和顶部的距离
function offset(dom) {
    var l = 0 - dom.clientLeft
    var t = 0 - dom.clientTop
    while (dom) {
        l += dom.clientLeft + dom.offsetLeft
        t += dom.clientTop + dom.offsetTop
        dom = dom.offsetParent
    }
    return { left: l, top: t }
}

// 生成指定区间的随机整数 如 10-20
function randomInt(min, max) {
    return Math.round(Math.random() * (max - min)) + min
}
// 0-5
// Math.round( Math.random()*5 )
// 5-10
// Math.round( Math.random()*5) ) + 5
// Math.round( Math.random()*(10-5)) ) + 5


// 生成n位随机验证码（数字、大写字母、小写字母）
function randomCode(n) {
    var code = ''
    for (var i = 0; i < n; i++) {
        // ASCII 0-9 48-57   A-Z 65-90  a-z 97-122
        // 48-122 范围中无效的范围 58-64  91-96
        // 生成48-122范围的一个随机数 66 -> String.fromCharCode(66) -> 'B'
        do {
            var ascii = randomInt(48, 122)// 66 生成48-122范围的一个随机数
        } while (ascii > 57 && ascii < 65 || ascii > 90 && ascii < 97)

        code += String.fromCharCode(ascii)
    }
    return code
}

// 生成随机16进制颜色值 '#3e3e3e'
// 构成：'#'+6个16进制数字
// 16进制数字：'0123456789abcdef'
function randomColor() {
    var color = '#'
    var str = '0123456789abcdef'
    for (var i = 0; i < 6; i++) {
        var index = randomInt(0, 15)// 0-15
        color += str[index]
    }
    return color
}

// 根据传入的key值，返回url查询字符串对应的值
function getQueryString(key) {
    // 1.获取页面url的查询字符串
    var str = location.search
    // 2.把str的首个字符去掉
    str = str.substr(1)
    // 3.将字符串分割成数组
    var arr = str.split('&')
    // 4.遍历数组，分别切割每一个元素
    for (var i = 0; i < arr.length; i++) {
        var arr2 = arr[i].split('=')// ['key','hehe']
        if (arr2[0] === key) {
            return arr2[1]
        }
    }
    return ''
}

/* 
    animate 运动函数
    参数说明：
        dom 要运动的元素
        attr 元素要运动的属性
        target 运动的目标位置
        callback 运动完成之后的回调函数，可选
    支持运动的属性：
        1.支持带px单位的属性（left top right bottom width height marginLeft fontSize ...）
        2.支持透明度opacity属性运动
        3.支持滚动条scrollLeft\scrollTop属性运动
*/
function animate(dom, attr, target, callback) {
    // 获取attr属性的当前值
    if (attr === 'opacity') {// 透明度运动范围 0-100
        // 如果是透明度属性，则当前值和目标值都乘以100(方便计算)
        var current = getComputedStyle(dom)[attr] * 100
        target *= 100
    } else if (attr === 'scrollLeft' || attr === 'scrollTop') {
        // 获取滚动条的当前值
        var current = dom[attr]
    } else {
        // 获取带px单位的属性的当前值
        var current = parseInt(getComputedStyle(dom)[attr]) // '10px'->10
    }

    clearInterval(dom.timer)// 先把上次的计时器清除
    dom.timer = setInterval(function () {
        // 持续变化的速度（自带正负号）
        var speed = (target - current) / 10

        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)

        // 每隔20毫秒当前位置current+速度speed
        current += speed

        // 临界值判断（运动停止：剩余运动量<=每次的运动量）
        if (Math.abs(target - current) <= Math.abs(speed)) {
            // dom到达目标位置
            if (attr === 'opacity') {
                dom.style[attr] = target / 100
            } else if (attr === 'scrollLeft' || attr === 'scrollTop') {
                dom[attr] = target
            } else {
                dom.style[attr] = target + 'px'
            }
            // 停止运动
            clearInterval(dom.timer)
            // console.log( '到达目标位置' )
            // callback()// 执行动画完成的回调函数
            typeof callback === 'function' && callback()
        } else {
            // dom没有到达目标位置
            if (attr === 'opacity') {
                dom.style[attr] = current / 100
            } else if (attr === 'scrollLeft' || attr === 'scrollTop') {
                dom[attr] = current
            } else {
                dom.style[attr] = current + 'px'
            }
        }
    }, 20)
}

